<template>
    <div>
        <Category :scene="scene"></Category>

        <el-card style="margin:10px 0">
            <div v-show="scene == 0">
                <el-button type="primary" icon="Plus" :disabled="categoryStore.C3Id ? false : true"
                    @click="addAttr">添加属性</el-button>
                <el-table border style="margin:10px 0" :data='AttrList'>
                    <el-table-column label="序号" align="center" type="index" width="80px"></el-table-column>
                    <el-table-column label="属性名称" align="center" width="120px" prop="attrName"></el-table-column>
                    <el-table-column label="属性值名称" align="center">
                        <template #="{ row, $index }">
                            <el-tag v-for="(item, index) in row.attrValueList" :key="item.id" style="margin: 5px;">{{
            item.valueName }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="240px">
                        <template #default="{ row, $index }">
                            <el-button type="primary" icon="Edit" @click="updateAttr(row)"></el-button>

                            <el-popconfirm title="你確定要刪除吗?" @confirm=" deleteAttr(row.id)">
                                <template #reference>
                                    <el-button type="primary" icon="Delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-show="scene == 1">
                <el-form :inline="true">
                    <el-form-item label="属性名称">
                        <el-input placeholder="输入属性名称" v-model="attrParams.attrName"></el-input>
                    </el-form-item>
                </el-form>

                <el-button type="primary" icon="Plus" :disabled="attrParams.attrName ? false : true"
                    @click="addAttrValue">添加属性值</el-button>
                <el-button @click="cancel">取消</el-button>

                <el-table border style="margin:10px 0" :data="attrParams.attrValueList">
                    <el-table-column label="序号" width="80px" type="index" align="center"></el-table-column>
                    <el-table-column label="属性值名称">
                        <template #="{ row, $index }">
                            <el-input aria-placeholder="输入属性值名称" v-model="row.valueName" v-if="row.flag" :ref="(vc)=>inputAttr[$index]=vc"
                                @blur="toLook(row, $index)"></el-input>
                            <div v-else @click="toEdit(row,$index)">{{ row.valueName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="属性值操作">
                        <template #="{row,$index}">
                            <el-button type="danger" icon="Delete" @click="()=>attrParams.attrValueList.splice($index,1)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-button type="primary" @click="save" :disabled="attrParams.attrValueList.length>0?false:true">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>

        </el-card>
    </div>
</template>

<script setup lang='ts'>
import useCategoryStore from '@/store/modules/category'
import { watch, ref, reactive,nextTick,onBeforeUnmount } from 'vue'
import { reqAttr, reqAddOrUpdate,reqDelete } from '@/api/product/attr'
const categoryStore = useCategoryStore()
const AttrList = ref([])
const inputAttr=ref([])
const scene = ref(0)
const attrParams = reactive({
    attrName: "",
    attrValueList: [],
    categoryId: '',
    categoryLevel: 3
})
watch(() => categoryStore.C3Id, async () => {
    AttrList.value = []
    if (!categoryStore.C3Id) return
    const { C1Id, C2Id, C3Id } = categoryStore
    const res = await reqAttr(C1Id, C2Id, C3Id)
    if (res.code == 200) {
        AttrList.value = res.data
    }
})

const addAttr = () => {
    Object.assign(attrParams, {
        attrName: "",
        attrValueList: [],
        categoryId: categoryStore.C3Id,
        categoryLevel: 3
    })
    scene.value = 1
}
const updateAttr = (row) => {
    scene.value = 1
    Object.assign(attrParams,JSON.parse(JSON.stringify(row)))
    // console.log(row)
}

const cancel = () => {
    scene.value = 0
}

const addAttrValue = () => {
    attrParams.attrValueList.push({
        valueName: '',
        flag: true
    })
    nextTick(()=>{
        inputAttr.value[attrParams.attrValueList.length-1].focus()
    })
}

const save = async () => {
    attrParams.categoryId = categoryStore.C3Id
    const res = await reqAddOrUpdate(attrParams)
    if (res.code == 200) {
        scene.value = 0
        const { C1Id, C2Id, C3Id } = categoryStore
        let List = await reqAttr(C1Id, C2Id, C3Id)
        AttrList.value = List.data
    }
}

const toLook = (row, $index) => {
    if (row.valueName.trim() == '') {
        attrParams.attrValueList.splice($index, 1)
        return
    }

    const repeat = attrParams.attrValueList.find(item => {
        if (item != row) {
            return item.valueName === row.valueName
        }
    })
    if (repeat) {
        attrParams.attrValueList.splice($index, 1)
        return
    }

    row.flag = false
}

const toEdit = (row,$index) => {
    row.flag = true
    nextTick(()=>{
        inputAttr.value[$index].focus()
    })
}

const deleteAttr = async (attrId)=>{
    const res = await reqDelete(attrId)
    if(res.code ==200){
        const { C1Id, C2Id, C3Id } = categoryStore
        let List = await reqAttr(C1Id, C2Id, C3Id)
        AttrList.value = List.data
    }
}   

onBeforeUnmount(()=>{
    categoryStore.$reset()
})
</script>

<style scoped></style>